<template>
	<div class="group-member-item">
		<div class="member-avatar">
			<head-image :url="member.headImage" :name="member.showNickName" :size="40" :id="String(member.userId)" :group="group" :isGroupMember="true" :member="member" :isOwner="isOwner" :isAdmin="isAdmin">
			</head-image>
			<div v-if="isOwner" class="role-tag owner-tag">群主</div>
			<div v-else-if="isAdmin" class="role-tag admin-tag">管理员</div>
		</div>
		<div class="member-name" :title="member.showNickName">{{ formatName }}</div>
		<div v-if="showDel" class="member-del" @click="$emit('del',member)">
			<i class="el-icon-delete"></i>
		</div>
	</div>
</template>

<script>
	import HeadImage from "../common/HeadImage.vue";
	export default{
		name: "groupMember",
		components:{HeadImage},
		data(){
			return {};
		},
		props:{
			member:{
				type: Object,
				required: true
			},
			showDel:{
				type: Boolean,
				default: false
			},
			ownerId: {
				type: [String, Number],
				default: ''
			},
			group: {
				type: Object,
				default: () => ({})
			},
			isCurrentUserAdmin: {
				type: Boolean,
				default: false
			},
			nameMaxLength: {
				type: Number,
				default: 6
			}
		},
		computed: {
			isOwner() {
				return this.member.userId == this.ownerId;
			},
			isAdmin() {
				return this.member.isAdmin === 'Y';
			},
			formatName() {
				if (!this.member.showNickName) return '';
				
				const name = this.member.showNickName.toString();
				// 使用传入的最大长度属性，默认为6个字符
				if (name.length > this.nameMaxLength) {
					return name.substring(0, this.nameMaxLength) + '...';
				}
				return name;
			}
		},
		methods: {
			handleMemberClick(e) {
				// 不需要在这里处理点击事件了，由 HeadImage 组件处理
			}
		}
	}
</script>

<style lang="scss">
	.group-member-item {
		position: relative;
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 5px;
		margin: 0;
		border-radius: 4px;
		transition: background-color 0.2s ease;
		
		&:hover {
			background-color: rgba(0, 0, 0, 0.03);
		}

		.member-avatar {
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-bottom: 5px;

			.role-tag {
				position: absolute;
				bottom: -2px;
				left: 50%;
				transform: translateX(-50%);
				padding: 0 4px;
				border-radius: 6px;
				font-size: 9px;
				color: white;
				white-space: nowrap;
				z-index: 1;
				box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
			}

			.owner-tag {
				background-color: #FF9800;
			}

			.admin-tag {
				background-color: #2196F3;
			}
		}

		.member-name {
			font-size: 12px;
			line-height: 1.2;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			width: 100%;
			text-align: center;
			color: #333;
			height: 1.2em; /* 固定高度，确保单行显示 */
			max-width: 90px; /* 设置最大宽度，防止过长 */
			margin: 0 auto;
		}

		.member-del {
			position: absolute;
			right: 0;
			top: 0;
			width: 20px;
			height: 20px;
			line-height: 20px;
			text-align: center;
			border-radius: 50%;
			background-color: rgba(0, 0, 0, 0.5);
			color: white;
			cursor: pointer;
			display: none;

			&:hover {
				background-color: rgba(0, 0, 0, 0.7);
			}
		}

		&:hover {
			.member-del {
				display: block;
			}
		}
	}
</style>
